<template>
  <footer class="footer-box">
    <div class="comment-input" @click="flagBottom=true">不想说点什么吗？</div>
    <div class="comment-detail" id="userCommentMb" @click="flagBottom=false" v-if="flagBottom">
      <div class="user-input" @click.stop>
        <h4>头像</h4>
        <ul class="user-head" @click="userChoose($event.target)">
          <li
            v-for="(n, i) in 24" :key="i"
            :class="{'user-choose':comment.userImg===`user${n}.png`}"
            data-img="user1.png"
            :style="`background-image: url(./imgs/users/user${n}.png)`"
            :userimg.prop="`user${n}.png`"
          >
          </li>
        </ul>
        <h4>昵称</h4>
        <input class="user-nikename" type="text" placeholder="昵称" v-model="comment.name" />
        <h4>评分</h4>
        <el-rate
            v-model="comment.source"
            show-score>
        </el-rate>
        <h4>评论</h4>
        <textarea class="user-message" placeholder="留下点足迹..." v-model="comment.msg"></textarea>
        <div class="send-btn">
          <span @click="flagBottom=false">关闭</span>
          <span @click="send">发送</span>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  data() {
    return {
        flagBottom:false,
        comment:{
            userImg:'user1.png',
            source:5,
            name:'',
            msg:'',
            filmId:null
        }
    };
  },
  created() {},
  methods: {
      userChoose(target){
        //   console.log(target);
          this.comment.userImg =  target.userimg
      },
      send(){
          this.comment.filmId = this.$route.params.filmId
          this.$api.addComment(this.comment)
            .then(message => {
                // console.log('添加评论成功！');

                this.comment = {
                    userImg:'user1.png',
                    source:5,
                    name:'',
                    msg:'',
                    filmId:null
                }
                this.flagBottom = false 
                
                // 触发更新评论的事件
                this.$root.$emit('update:comment')

            })
      }
  },
};
</script>

<style lang="less" scoped>
</style>